<!DOCTYPE html>
<html autopagermatchedrules="1" lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">

        <title>Twitter / Create an Account</title>

        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

        <meta name="description"
              content="Instantly connect to what's most important to you. Follow your friends, experts, favorite celebrities, and breaking news.">


        <link href="https://twitter.com/favicons/favicon.ico"
              rel="shortcut icon" type="image/x-icon">

        <?php
        $cs = Yii::app()->getClientScript();
        // CSS
        $cs->registerCssFile(Html::cssUrl('t1_core_logged_out.css'), 'screen');
        $cs->registerCssFile(Html::cssUrl('t1_more.css'), 'screen');
        $cs->registerCssFile(Html::cssUrl('t1_signup.css'), 'screen');
        $cs->registerCssFile(Html::cssUrl('jquery.notty.css'), 'screen');

        // Js
        $cs->registerCoreScript('jquery');
        $cs->registerScriptFile(Html::jsUrl("jquery.notty.js"));
            
        ?>
    
    
        <script>
         $(document).ready(function(){
            <?php
                foreach (Yii::app()->user->getFlashes() as $key=>$message){
                    echo "
                        $.notty({
                            title   : '$message',
                        });
                    ";
                }
            ?>
         });
        </script>

    </head>
    <body class="t1 logged-out phx-signup">
        <div id="doc" class="">
            <div class="push-loader" id="pushStateSpinner"></div>

            <div class="topbar js-topbar">
                <div id="banners" class="js-banners"></div>
                <div class="global-nav" data-section-term="top_nav">
                    <div class="global-nav-inner">
                        <div class="container">


                            <ul class="nav js-global-actions">
                                <li class="home" data-global-action="t1home"><a
                                        class="nav-logo-link" href="#"
                                        data-nav="front"> <i class="bird-topbar-blue"></i>
                                    </a></li>
                            </ul>
                            <ul class="nav secondary-nav session-dropdown " id="session">
                                <li class="dropdown js-session"><a
                                        class="dropdown-toggle dropdown-signin" id="signin-link"
                                        href="#" data-nav="login"> <small>Have an account?</small> Sign
                                        in <span class="caret"></span>
                                    </a> <a class="dropdown-signup" id="signup-link"
                                            href="#"
                                            data-nav="signup"> <small>New to Twitter?</small><span
                                            class="emphasize"> Join Today »</span>
                                    </a>
                                    <ul class="dropdown-menu dropdown-form" id="signin-dropdown">
                                        <li class="dropdown-caret right"><span class="caret-outer"></span>
                                            <span class="caret-inner"></span></li>
                                        <li>
                                            <form action="#"
                                                  class="js-signin signin" method="post">
                                                <fieldset class="textbox">
                                                    <label class="username js-username"> <span>Username or email</span>
                                                        <input class="js-username-field email-input"
                                                               name="session[username_or_email]" autocomplete="on"
                                                               type="text">
                                                    </label> <label class="password js-password"> <span>Password</span>
                                                        <input class="js-password-field" value=""
                                                               name="session[password]" type="password">
                                                    </label>
                                                </fieldset>
                                                <fieldset class="subchck">
                                                    <label class="remember"> <input value="1" name="remember_me"
                                                                                    type="checkbox"> <span>Remember me</span>
                                                    </label>
                                                    <button type="submit" class="btn submit">Sign in</button>
                                                </fieldset>

                                                <input name="scribe_log" type="hidden"> <input
                                                    name="redirect_after_login" value="" type="hidden"> <input
                                                    value="28191437b2c29f2e6f09fdf9d8a11d3b726e338d"
                                                    name="authenticity_token" type="hidden">
                                                <div class="divider"></div>
                                                <p>
                                                    <a class="forgot"
                                                       href="#">Forgot
                                                        password?</a><br> <a class="mobile has-sms"
                                                                         href="#">Already using
                                                        Twitter via text message?</a>
                                                </p>
                                            </form>
                                        </li>
                                    </ul></li>
                            </ul>



                            <ul class="nav secondary-nav language-dropdown">
                                <li class="dropdown js-language-dropdown"><a
                                        class="dropdown-toggle" href="javascript:;"> <small>Language:</small>
                                        <span class="js-current-language">English</span> <b
                                            class="caret"></b>
                                    </a>
                                    <ul class="dropdown-menu">
                                        <li class="dropdown-caret right"><span class="caret-outer"></span>
                                            <span class="caret-inner"></span></li>
                                        <li><a href="#"
                                               data-lang-code="id" title="Indonesian"
                                               class="js-language-link">Bahasa Indonesia</a></li>
                                        <li><a href="#"
                                               data-lang-code="msa" title="Malay" class="js-language-link">Bahasa
                                                Melayu</a></li>
                                        <li><a href="#"
                                               data-lang-code="da" title="Danish" class="js-language-link">Dansk</a></li>
                                        <li><a href="#"
                                               data-lang-code="de" title="German" class="js-language-link">Deutsch</a></li>
                                        <li><a href="#"
                                               data-lang-code="es" title="Spanish" class="js-language-link">Español</a></li>
                                        <li><a href="#"
                                               data-lang-code="fil" title="Filipino" class="js-language-link">Filipino</a></li>
                                        <li><a href="#"
                                               data-lang-code="it" title="Italian" class="js-language-link">Italiano</a></li>
                                        <li><a href="#"
                                               data-lang-code="hu" title="Hungarian" class="js-language-link">Magyar</a></li>
                                        <li><a href="#"
                                               data-lang-code="nl" title="Dutch" class="js-language-link">Nederlands</a></li>
                                        <li><a href="#"
                                               data-lang-code="no" title="Norwegian" class="js-language-link">Norsk</a></li>
                                        <li><a href="#"
                                               data-lang-code="pl" title="Polish" class="js-language-link">Polski</a></li>
                                        <li><a href="#"
                                               data-lang-code="pt" title="Portuguese"
                                               class="js-language-link">Português</a></li>
                                        <li><a href="#"
                                               data-lang-code="fi" title="Finnish" class="js-language-link">Suomi</a></li>
                                        <li><a href="#"
                                               data-lang-code="sv" title="Swedish" class="js-language-link">Svenska</a></li>
                                        <li><a href="#"
                                               data-lang-code="tr" title="Turkish" class="js-language-link">Türkçe</a></li>
                                        <li><a href="#"
                                               data-lang-code="ca" title="Catalan" class="js-language-link">català</a></li>
                                        <li><a href="#"
                                               data-lang-code="fr" title="French" class="js-language-link">français</a></li>
                                        <li><a href="#"
                                               data-lang-code="ru" title="Russian" class="js-language-link">Русский</a></li>
                                        <li><a href="#"
                                               data-lang-code="uk" title="Ukrainian" class="js-language-link">Українська
                                                мова</a></li>
                                        <li><a href="#"
                                               data-lang-code="he" title="Hebrew" class="js-language-link">עִבְרִית</a></li>
                                        <li><a href="#"
                                               data-lang-code="ur" title="Urdu" class="js-language-link">اردو</a></li>
                                        <li><a href="#"
                                               data-lang-code="ar" title="Arabic" class="js-language-link">العربية</a></li>
                                        <li><a href="#"
                                               data-lang-code="fa" title="Farsi" class="js-language-link">فارسی</a></li>
                                        <li><a href="#"
                                               data-lang-code="hi" title="Hindi" class="js-language-link">हिन्दी</a></li>
                                        <li><a href="#"
                                               data-lang-code="th" title="Thai" class="js-language-link">ภาษาไทย</a></li>
                                        <li><a href="#"
                                               data-lang-code="ja" title="Japanese" class="js-language-link">日本語</a></li>
                                        <li><a href="#"
                                               data-lang-code="zh-cn" title="Simplified Chinese"
                                               class="js-language-link">简体中文</a></li>
                                        <li><a href="#"
                                               data-lang-code="zh-tw" title="Traditional Chinese"
                                               class="js-language-link">繁體中文</a></li>
                                        <li><a href="#"
                                               data-lang-code="ko" title="Korean" class="js-language-link">한국어</a></li>
                                    </ul>
                                    <div class="js-front-language">
                                        <form action="/sessions/change_locale" class="language"
                                              method="POST">
                                            <input name="lang" type="hidden"> <input name="redirect"
                                                                                     type="hidden"> <input name="authenticity_token"
                                                                                     value="28191437b2c29f2e6f09fdf9d8a11d3b726e338d"
                                                                                     type="hidden">
                                        </form>
                                    </div></li>
                            </ul>

                            <div class="pull-right">
                                <form class="form-search js-search-form " action="/search"
                                      id="global-nav-search">
                                    <span class="search-icon js-search-action"> <i
                                            class="nav-search" tabindex="0"></i>
                                    </span> <label class="hidden-elements" for="search-query">Search</label>
                                    <input class="search-input" id="search-query"
                                           placeholder="Search" name="q" autocomplete="off"
                                           spellcheck="false" tabindex="-1" type="text"> <input
                                           disabled="disabled" class="search-input search-hinting-input"
                                           id="search-query-hint" autocomplete="off" spellcheck="false"
                                           type="text">
                                    <div class="dropdown-menu typeahead">
                                        <div class="dropdown-caret">
                                            <div class="caret-outer"></div>
                                            <div class="caret-inner"></div>
                                        </div>
                                        <div class="dropdown-inner js-typeahead-results">
                                            <ul class="typeahead-items saved-searches-list">

                                                <li class="saved-search-item search-item"><a href=""
                                                                                             data-search-query="" data-query-source=""
                                                                                             data-ds="saved_search"><i class="generic-search"></i></a></li>
                                            </ul>
                                            <ul style="display: none;" class="typeahead-items topics-list">

                                                <li class="topics-item search-item"><a href=""
                                                                                       data-search-query="" data-query-source="typeahead_click"
                                                                                       data-ds="topics"><i class="generic-search"></i></a></li>
                                            </ul>
                                            <div style="display: none;"
                                                 class="typeahead-accounts js-typeahead-accounts">
                                                <ul class="typeahead-items">

                                                    <li data-user-id="" data-user-screenname=""
                                                        data-remote="true" data-score=""
                                                        class="typeahead-item typeahead-account-item js-selectable">

                                                        <a data-query-source="typeahead_click" data-search-query=""
                                                           data-ds="account"> <img src="" class="avatar size24"
                                                                                height="24" width="24"> <span class="fullname"></span> <i
                                                                                class="verified hidden"></i> <span class="username"><s>@</s><b></b></span>
                                                        </a>
                                                    </li>
                                                    <li
                                                        class="js-selectable typeahead-accounts-shortcut js-shortcut"><a
                                                            href="" data-search-query=""
                                                            data-query-source="typeahead_click" data-shortcut="true"
                                                            data-ds="account_search"></a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>


                            <a id="close-all-button"
                               class="close-all-tweets js-close-all-tweets" href="#"
                               title="Close all open Tweets"> <i class="nav-breaker"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div id="page-outer">
                <div id="page-container" class="wrapper wrapper-signup">
                    <div class="alert-messages hidden" id="message-drawer">
                        <div class="message ">
                            <div class="message-inside">
                                <span class="message-text"></span><a class="dismiss" href="#">×</a>
                            </div>
                        </div>
                    </div>
                    <div class="page-canvas">
                        <div class="signup-wrapper">

                            <h1>Join Twitter today.</h1>

                            <?php echo $content ?>
                        </div>
                    </div>

                </div>
            </div>
        </div>


        <div class="modal-overlay"></div>

        <div class="hidden-elements">
            <div id="flash-preload"></div>
            <iframe class="tweet-post-iframe" name="tweet-post-iframe"></iframe>

        </div>

        <div id="dm_dialog" class="modal-container dm-conversation-list">
            <div class="close-modal-background-target"></div>
            <div class="modal draggable twttr-dialog dm-dialog">
                <div id="dm_dialog_conversation_list" class="modal-content">

                    <div class="twttr-dialog-header modal-header">
                        <h3>Direct messages</h3>
                        <a class="btn dm-new-button dm-header-new" href="#">New message</a>
                        <div class="twttr-dialog-close">
                            <b>×</b>
                        </div>
                    </div>


                    <div class="twttr-dialog-inside">
                        <div class="twttr-dialog-body clearfix">
                            <div class="dm-error js-dm-error">
                                <a href="#" class="js-dismiss"> <i class="close"></i>
                                </a> <span class="dm-error-text"></span>
                            </div>
                            <div class="twttr-dialog-content">
                                <div
                                    class="dm-threads js-dm-threads js-modal-scrollable js-twttr-dialog-not-draggable">
                                    <ul class="dm-thread-list js-dm-thread-list">
                                        <div class="dm-placeholder-empty dm-no-messages">
                                            <p>
                                                <strong>You don't have any messages yet.</strong>
                                            </p>
                                            <p>Direct messages are 140 characters, private, and can be
                                                sent to any user who follows you on Twitter.</p>
                                        </div>
                                    </ul>
                                </div>
                            </div>

                            <div class="twttr-dialog-footer">
                                Tip: you can send a message to anyone who follows you. <a
                                    href="#"
                                    target="_blank" class="learn-more">Learn more</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="dm_dialog_conversation" class="modal-content">

                    <div class="twttr-dialog-header modal-header">
                        <h3>
                            <a class="js-dm-header-title" href="#">Direct messages</a> ›
                            with <span class="dm_dialog_real_name"></span>
                        </h3>
                        <div class="twttr-dialog-close">
                            <b>×</b>
                        </div>
                    </div>


                    <div class="twttr-dialog-inside">
                        <div class="twttr-dialog-body clearfix">
                            <div class="dm-error js-dm-error">
                                <a href="#" class="js-dismiss"> <i class="close"></i>
                                </a> <span class="dm-error-text"></span>
                            </div>
                            <div class="twttr-dialog-content"></div>
                            <form class="dm-tweetbox tweet-form">
                                <div class="tweet-content">
                                    <label class="hidden-elements" for="tweet-box-1343934551">Tweet
                                        text</label>
                                    <textarea id="tweet-box-1343934551" class="tweet-box"></textarea>
                                </div>
                                <div class="tweet-button">
                                    <span class="spinner"></span> <span class="tweet-counter">140</span>
                                    <button class="btn tweet-action primary-btn disabled"
                                            type="submit">Send message</button>
                                </div>
                                <div class="dm-delete-confirm js-dm-delete-confirm">
                                    <p>Are you sure you want to delete this message?</p>
                                    <button type="button" class="btn caution-btn js-prompt-ok"
                                            data-message-id="">Delete message</button>
                                    <button type="button" class="btn js-prompt-cancel">Cancel</button>
                                </div>
                            </form>
                        </div>

                        <div class="twttr-dialog-footer">
                            Tip: you can send a message to anyone who follows you. <a
                                href="#"
                                target="_blank" class="learn-more">Learn more</a>
                        </div>
                    </div>
                </div>
                <div id="dm_dialog_new" class="modal-content">

                    <div class="twttr-dialog-header modal-header">
                        <h3>
                            <a href="#">Direct messages</a> › New
                        </h3>
                        <div class="twttr-dialog-close">
                            <b>›</b>
                        </div>
                    </div>


                    <div class="twttr-dialog-inside">
                        <div class="twttr-dialog-body clearfix">
                            <div class="dm-dialog-content">
                                <div class="dm-to">
                                    <input class="dm-to-input twttr-directmessage-input" type="text">
                                    <img class="avatar size24 selected-profile"
                                         src="<?php echo Html::imageUrl('default_profile_6_mini.png')?>"
                                         data-default-img="https://si0.twimg.com/sticky/default_profile_images/default_profile_6_mini.png">
                                    <ul class="dropdown-menu autocomplete-results">
                                        <li
                                            class="dropdown-link dropdown-account template-row autocomplete-item">
                                            <img class="avatar size24" height="24" width="24"> <strong
                                                class="fullname"></strong> <span class="pretty-link"><s>@</s><b
                                                    class="username"></b></span>
                                        </li>
                                    </ul>
                                </div>

                                <div class="dm-convo-placeholder">
                                    <div class="dm-error js-dm-error">
                                        <a href="#" class="js-dismiss"> <i class="close"></i>
                                        </a> <span class="dm-error-text"></span>
                                    </div>
                                </div>

                            </div>

                            <form class="dm-tweetbox tweet-form">
                                <div class="tweet-content">
                                    <label class="hidden-elements" for="tweet-box-1343934552">Tweet
                                        text</label>
                                    <textarea id="tweet-box-1343934552" class="tweet-box"></textarea>
                                </div>
                                <div class="tweet-button">
                                    <span class="spinner"></span> <span class="tweet-counter">140</span>
                                    <button class="btn tweet-action primary-btn disabled"
                                            type="submit">Send message</button>
                                </div>
                                <div class="dm-delete-confirm js-dm-delete-confirm">
                                    <p>Are you sure you want to delete this message?</p>
                                    <button type="button" class="btn caution-btn js-prompt-ok"
                                            data-message-id="">Delete message</button>
                                    <button type="button" class="btn js-prompt-cancel">Cancel</button>
                                </div>
                            </form>
                            <div class="twttr-dialog-footer">
                                Tip: you can send a message to anyone who follows you. <a
                                    href="#"
                                    target="_blank" class="learn-more">Learn more</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="goto-user-dialog" class="modal-container">
            <div class="modal modal-small draggable">
                <div class="modal-content">
                    <button type="button" class="modal-btn modal-close">
                        <i class="close-medium"><span class="hidden-elements">Close</span></i>
                    </button>

                    <div class="modal-header">
                        <h3 class="modal-title">Go to a person's profile</h3>
                    </div>

                    <div class="modal-body">
                        <div class="modal-inner">
                            <form class="goto-user-form">
                                <input class="username-input"
                                       placeholder="Start typing a name to jump to a profile"
                                       type="text">
                                <ul style="display: none;"
                                    class="dropdown-menu autocomplete-results">
                                    <li
                                        class="dropdown-link dropdown-account template-row autocomplete-item">
                                        <img class="avatar size24" height="24" width="24"> <strong
                                            class="fullname"></strong> <span class="pretty-link"><s>@</s><b
                                                class="username"></b></span>
                                    </li>
                                </ul>
                            </form>
                        </div>
                    </div>

                </div>
            </div>
        </div>



        <div id="retweet-tweet-dialog" class="modal-container">
            <div class="close-modal-background-target"></div>
            <div class="modal draggable">
                <div class="modal-content">
                    <button class="modal-btn modal-close">
                        <i class="close-medium"><span class="hidden-elements">Close</span></i>
                    </button>

                    <div class="modal-header">

                        <h3 class="modal-title">Retweet this to your followers?</h3>

                    </div>

                    <div class="modal-body modal-tweet"></div>

                    <div class="modal-footer">
                        <button class="btn cancel-action">Cancel</button>

                        <button class="btn primary-btn retweet-action">Retweet</button>

                    </div>
                </div>
            </div>
        </div>
        <div id="delete-tweet-dialog" class="modal-container">
            <div class="close-modal-background-target"></div>
            <div class="modal draggable">
                <div class="modal-content">
                    <button class="modal-btn modal-close">
                        <i class="close-medium"><span class="hidden-elements">Close</span></i>
                    </button>

                    <div class="modal-header">
                        <h3 class="modal-title">Are you sure you want to delete this Tweet?</h3>
                    </div>

                    <div class="modal-body modal-tweet"></div>

                    <div class="modal-footer">
                        <button class="btn cancel-action">Cancel</button>
                        <button class="btn primary-btn delete-action">Delete</button>
                    </div>
                </div>
            </div>
        </div>


        <div id="keyboard-shortcut-dialog" class="modal-container">
            <div class="close-modal-background-target"></div>
            <div class="modal modal-large draggable">
                <div class="modal-content">
                    <button type="button" class="modal-btn modal-close js-dimiss">
                        <i class="close-medium"><span class="hidden-elements">Close</span></i>
                    </button>


                    <div class="modal-header">
                        <h3 class="modal-title">Keyboard shortcuts</h3>
                    </div>


                    <div class="modal-body">

                        <div class="keyboard-shortcuts clearfix"
                             id="keyboard-shortcut-menu">

                            <table class="modal-table">
                                <tbody>
                                    <tr>
                                        <td class="shortcut"><b class="sc-key">Enter</b></td>
                                        <td class="shortcut-label">Open Tweet details</td>
                                    </tr>
                                    <tr>
                                        <td class="shortcut"><b class="sc-key">G</b> <b class="sc-key">F</b>
                                        </td>
                                        <td class="shortcut-label">Go to user...</td>
                                    </tr>
                                    <tr>
                                        <td class="shortcut"><b class="sc-key">?</b></td>
                                        <td class="shortcut-label">This menu</td>
                                    </tr>
                                    <tr>
                                        <td class="shortcut"><b class="sc-key">J</b></td>
                                        <td class="shortcut-label">Next Tweet</td>
                                    </tr>
                                    <tr>
                                        <td class="shortcut"><b class="sc-key">K</b></td>
                                        <td class="shortcut-label">Previous Tweet</td>
                                    </tr>
                                    <tr>
                                        <td class="shortcut"><b class="sc-key">Space</b></td>
                                        <td class="shortcut-label">Page down</td>
                                    </tr>
                                    <tr>
                                        <td class="shortcut"><b class="sc-key">/</b></td>
                                        <td class="shortcut-label">Search</td>
                                    </tr>
                                    <tr>
                                        <td class="shortcut"><b class="sc-key">.</b></td>
                                        <td class="shortcut-label">Load new Tweets</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>







        <div id="geo-disabled-dropdown">
            <ul class="dropdown-menu" tabindex="-1">
                <li class="dropdown-caret"><span class="caret-outer"></span> <span
                        class="caret-inner"></span></li>
                <li class="geo-not-enabled-yet">
                    <h2>Add a location to your Tweets</h2>
                    <p>
                        When you tweet with a location, Twitter stores that location. You
                        can switch location on/off before each Tweet and always have the
                        option to delete your location history. <a
                            href="#"
                            target="_blank">Learn more</a>
                    </p>
                    <div>
                        <button type="button" class="geo-turn-on btn primary-btn">Turn
                            location on</button>
                        <button type="button" class="geo-not-now btn-link">Not now</button>
                    </div>
                </li>
            </ul>
        </div>

        <div id="geo-enabled-dropdown">
            <ul class="dropdown-menu" tabindex="-1">
                <li class="dropdown-caret"><span class="caret-outer"></span> <span
                        class="caret-inner"></span></li>
                <li class="geo-query-location"><input autocomplete="off"
                                                      placeholder="Search for a neighborhood or city" type="text"> <i
                                                      class="generic-search"></i></li>
                <li class="geo-dropdown-status"></li>
                <li class="dropdown-link geo-turn-off-item geo-focusable"><i
                        class="close"></i>Turn off location</li>
            </ul>
        </div>


        <div id="profile_popup" class="modal-container">
            <div class="close-modal-background-target"></div>
            <div class="modal modal-small draggable">
                <div class="modal-content clearfix">
                    <button class="modal-btn modal-close">
                        <i class="close-medium"><span class="hidden-elements">Close</span></i>
                    </button>
                    <div class="modal-header">
                        <h3 class="modal-title">Profile summary</h3>
                    </div>

                    <div class="modal-body profile-modal"></div>

                    <div class="loading">
                        <img src="<?php echo Html::imageUrl('bigger_spinner.gif')?>">
                    </div>
                </div>
            </div>
        </div>
        <div id="list-membership-dialog" class="modal-container">
            <div class="close-modal-background-target"></div>
            <div class="modal modal-small draggable">
                <div class="modal-content">
                    <button class="modal-btn modal-close">
                        <i class="close-medium"><span class="hidden-elements">Close</span></i>
                    </button>
                    <div class="modal-header">
                        <h3 class="modal-title">Your lists</h3>
                    </div>
                    <div class="modal-body">
                        <div class="list-membership-content"></div>
                        <span class="spinner lists-spinner" title="Loading…"></span>
                    </div>
                </div>
            </div>
        </div>
        <div id="list-create-dialog" class="modal-container">
            <div class="close-modal-background-target"></div>
            <div class="modal modal-medium draggable">
                <div class="modal-content">
                    <button class="modal-btn modal-close">
                        <i class="close-medium"><span class="hidden-elements">Close</span></i>
                    </button>
                    <div class="modal-header">
                        <h3 class="modal-title">Create a new list</h3>
                    </div>
                    <div class="modal-body">

                        <div class="list-editor">
                            <div class="field">
                                <label for="list-name">List name</label> <input class="text"
                                                                                name="name" type="text">
                            </div>
                            <div class="field" style="display: none">
                                <label for="list-link">List link</label> <span></span>
                            </div>
                            <hr>

                            <div class="field">
                                <label for="description">Description</label>
                                <textarea name="description"></textarea>
                                <span class="help-text">Under 100 characters, optional</span>
                            </div>
                            <hr>

                            <div class="field">
                                <label for="mode">Privacy</label>
                                <div class="options">
                                    <label for="list-public-radio"> <input class="radio" name="mode"
                                                                           id="list-public-radio" value="public" checked="checked"
                                                                           type="radio"> <b>Public</b> · Anyone can follow this list
                                    </label> <label for="list-private-radio"> <input class="radio"
                                                                                     name="mode" id="list-private-radio" value="private"
                                                                                     type="radio"> <b>Private</b> · Only you can access this list
                                    </label>
                                </div>
                            </div>
                            <hr>

                            <div class="list-editor-save">
                                <div class="button btn btn-primary update-list-button"
                                     data-list-id="101380980">Save list</div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="activity-popup-dialog" class="modal-container">
            <div class="close-modal-background-target"></div>
            <div class="modal draggable">
                <div class="modal-content clearfix">
                    <button type="button" class="modal-btn modal-close">
                        <i class="close-medium"><span class="hidden-elements">Close</span></i>
                    </button>

                    <div class="modal-header">
                        <h3 class="modal-title"></h3>
                    </div>

                    <div class="modal-body">
                        <div class="activity-tweet clearfix"></div>
                        <div class="loading">
                            <img src="<?php echo Html::imageUrl('bigger_spinner.gif')?>">
                        </div>
                        <div class="activity-content clearfix"></div>
                    </div>
                </div>
            </div>
        </div>

        <div id="confirm_dialog" class="modal-container">
            <div class="close-modal-background-target"></div>
            <div class="modal draggable">
                <div class="modal-content">
                    <button class="modal-btn modal-close">
                        <i class="close-medium"><span class="hidden-elements">Close</span></i>
                    </button>
                    <div class="modal-header">
                        <h3 class="modal-title"></h3>
                    </div>
                    <div class="modal-body">
                        <p class="modal-body-text"></p>
                    </div>
                    <div class="modal-footer">
                        <button class="btn" id="confirm_dialog_cancel_button"></button>
                        <button id="confirm_dialog_submit_button"
                                class="btn primary-btn modal-submit"></button>
                    </div>
                </div>
            </div>
        </div>


        <div id="signin-or-signup-dialog">
            <div id="signin-or-signup" class="modal-container">
                <div class="close-modal-background-target"></div>
                <div class="modal modal-medium draggable">
                    <div class="modal-content">
                        <button class="modal-btn modal-close">
                            <i class="close-medium"><span class="hidden-elements">Close</span></i>
                        </button>
                        <div class="modal-header">
                            <h3 class="modal-title modal-long-title signup-only">Sign up for
                                Twitter &amp; follow @</h3>
                            <h3 class="modal-title not-signup-only">Sign in to Twitter</h3>
                        </div>
                        <div class="modal-body signup-only">
                            <form action="#" class="clearfix signup"
                                  method="post">
                                <div class="holding name">
                                    <input autocomplete="off" name="user[name]" maxlength="20"
                                           type="text"> <span class="holder">Full name</span>
                                </div>
                                <div class="holding email">
                                    <input class="email-input" autocomplete="off" name="user[email]"
                                           type="text"> <span class="holder">Email</span>
                                </div>
                                <div class="holding password">
                                    <input name="user[user_password]" type="password"> <span
                                        class="holder">Password</span>
                                </div>
                                <input value="" name="context" type="hidden"> <input
                                    value="28191437b2c29f2e6f09fdf9d8a11d3b726e338d"
                                    name="authenticity_token" type="hidden"> <input name="follows"
                                    value="" type="hidden"> <input
                                    class="btn signup-btn js-submit js-signup-btn" value="Sign up"
                                    type="submit">
                            </form>
                        </div>
                        <div class="modal-body not-signup-only">
                            <form action="#" class="signin"
                                  method="post">
                                <fieldset>

                                    <div class="clearfix holding">
                                        <span class="username js-username holder">Username or email</span>
                                        <input class="js-username-field email-input"
                                               name="session[username_or_email]" autocomplete="on"
                                               type="text">
                                        <p class="help-text-inline">
                                            Forgot your <a
                                                href="#" title=""
                                                tabindex="-1">username</a>?
                                        </p>
                                    </div>

                                    <div class="clearfix holding">
                                        <span class="password holder">Password</span> <input
                                            class="js-password-field" name="session[password]"
                                            type="password">
                                        <p class="help-text-inline">
                                            Forgot your <a
                                                href="#"
                                                tabindex="-1">password</a>?
                                        </p>
                                    </div>

                                    <input value="28191437b2c29f2e6f09fdf9d8a11d3b726e338d"
                                           name="authenticity_token" type="hidden">

                                </fieldset>
                                <div class="clearfix">

                                    <input name="scribe_log" type="hidden"> <input
                                        name="redirect_after_login" value="" type="hidden"> <input
                                        value="28191437b2c29f2e6f09fdf9d8a11d3b726e338d"
                                        name="authenticity_token" type="hidden">
                                    <button type="submit" class="submit btn primary-btn">Sign in</button>

                                    <fieldset class="subchck">
                                        <label class="remember"> <input value="1" name="remember_me"
                                                                        type="checkbox"> Remember me
                                        </label>
                                    </fieldset>

                                </div>
                                <div class="divider"></div>
                                <p>
                                    <a class="forgot"
                                       href="#">Forgot
                                        password?</a><br> <a class="mobile has-sms"
                                                         href="#">Already using
                                        Twitter via text message?</a>
                                </p>
                            </form>
                            <div class="signup">
                                <h2>Not on Twitter? Sign up, tune into the things you care about,
                                    and get updates as they happen.</h2>
                                <form action="#" class="signup"
                                      method="get">
                                    <button class="btn promotional signup-btn" type="submit">Sign up
                                        »</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="sms-codes-dialog" class="modal-container">
            <div class="close-modal-background-target"></div>
            <div class="modal modal-medium draggable">
                <div class="modal-content">
                    <button class="modal-btn modal-close">
                        <i class="close-medium"><span class="hidden-elements">Close</span></i>
                    </button>
                    <div class="modal-header">
                        <h3 class="modal-title">Two-way (sending and receiving) short
                            codes:</h3>
                    </div>
                    <div class="modal-body">

                        <table id="sms_codes" cellpadding="0" cellspacing="0">
                            <thead>
                                <tr>
                                    <th>Country</th>
                                    <th>Code</th>
                                    <th>For customers of</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>United States</td>
                                    <td>40404</td>
                                    <td>(any)</td>
                                </tr>
                                <tr>
                                    <td>Canada</td>
                                    <td>21212</td>
                                    <td>(any)</td>
                                </tr>
                                <tr>
                                    <td>United Kingdom</td>
                                    <td>86444</td>
                                    <td>Vodafone, Orange, 3, O2</td>
                                </tr>
                                <tr>
                                    <td>Brazil</td>
                                    <td>40404</td>
                                    <td>Nextel, TIM</td>
                                </tr>
                                <tr>
                                    <td>Haiti</td>
                                    <td>40404</td>
                                    <td>Digicel, Voila</td>
                                </tr>
                                <tr>
                                    <td>Ireland</td>
                                    <td>51210</td>
                                    <td>Vodafone, O2</td>
                                </tr>
                                <tr>
                                    <td>India</td>
                                    <td>53000</td>
                                    <td>Bharti Airtel, Videocon, Reliance</td>
                                </tr>
                                <tr>
                                    <td>Indonesia</td>
                                    <td>89887</td>
                                    <td>AXIS, 3, Telkomsel, Indosat, XL Axiata</td>
                                </tr>
                                <tr>
                                    <td rowspan="2">Italy</td>
                                    <td>4880804</td>
                                    <td>Wind</td>
                                </tr>
                                <tr>
                                    <td>3424486444</td>
                                    <td>Vodafone</td>
                                </tr>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td colspan="3">» <a target="_blank"
                                                         href="#">See
                                            SMS short codes for other countries</a>
                                    </td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>

    </body>
</html>